<template>
	<view class="mine-content">
		<view class="main">
			<view class="mine-top" style="">
				<image src="../../static/logo.png" mode="" style=""></image>
				<view class="top-content" style="">
					<view class="top-text" style="">
						集智科技
					</view>
					<view class="" style="font-size: 25rpx;" >
						<text style="padding-right: 30rpx;border-right: 1rpx solid #fff;">11贴</text>
						<text style="padding: 0 30rpx;border-right: 1rpx solid #fff;">5评</text>
						<text style="padding:0  30rpx;border-right: 1rpx solid #fff;">1粉</text>
						<text style="padding:0  30rpx;">0赞</text>
					</view>
				</view>
			</view>
			
			<view class="mine-center" style="">
			  <view class="center-item" style="" @click="Tomine(1)">
			    <view class="" style="background-color: #61d455;">
			      <i class="iconfont" style="">&#xe845;</i>
			    </view>
			    <text>我的车库</text>
			  </view>
			  
			  <view class="center-item" style="" @click="Tomine(2)">
			    <view class="" style="background-color: #929dff; ">
			      <i class="iconfont" style="">&#xe626;</i>
			    </view>
			    <text>智能服务</text>
			  </view>
			  
			  <view class="center-item" style="" @click="Tomine(3)">
			    <view class="" style="background-color: #54d9c5;">
			      <i class="iconfont" style="">&#xe64f;</i>
			    </view>
			    <text>我的订单</text>
			  </view>
			</view>
			<view class="bottom-content" style="">
				<view class="bottom-item" style="" @click="tourl()">
				    <view class="" style="display: flex;">
				        <i class="iconfont" style="">&#xe69c;</i>地图类型
				    </view>
					<view class="">
						<i class="iconfont" style="">&#xe633;</i>
					</view>
				</view>
				<view class="bottom-item" style="" @click="tourl('/pages/mine/Profile')">
				    <view class="" style="display: flex;">
				        <i class="iconfont" style="">&#xe624;</i>用户资料
				    </view>
					<view class="">
						<i class="iconfont" style="">&#xe633;</i>
					</view>
				</view>
				<view class="bottom-item" style="" @click="tourl()">
				    <view class="" style="display: flex;">
				        <i class="iconfont" style="">&#xe6af;</i>我的帖子
				    </view>
					<view class="">
						<i class="iconfont" style="">&#xe633;</i>
					</view>
				</view>
				<view class="bottom-item" style="" @click="tourl()">
				    <view class="" style="display: flex;">
				        <i class="iconfont" style="">&#xe78a;</i>我的回帖
				    </view>
					<view class="">
						<i class="iconfont" style="font-size: 30rpx; color: #aaaaaa;">&#xe633;</i>
					</view>
				</view>
			</view>
			
		</view>
		<view class="" style="background-color: #fff;padding: 150rpx 0;margin-top: 20rpx;">
			<view class="" @click="outLogin" style="background-color: #ff2f32;color: #fff;padding:15rpx 35rpx ;width: 20%;border-radius: 20rpx;margin: auto;text-align: center;">
				退出账号
			</view>
			<view class="" style="text-align: center;margin-top: 20rpx;font-size: 24rpx;">
				<text>用户协议</text> <text style="margin: 0 10rpx;color: gray;">和</text> <text>隐私政策</text>
			</view>
		</view>
		<view class="navbar">
			<navbarVue />
		</view>
	</view>
</template>

<script>
	import navbarVue from '../../components/navbar.vue'
	export default {
		 components: {
		    navbarVue
		  },
		data() {
			return {

			
				
			}
		},
		onLoad() {

		},
		methods: {
			tourl(url){
				
				if(url){
					uni.navigateTo({
						url:url
					})
				}else{
					uni.showToast({
						icon:'none',
						title: '该功能正在开发中...',
						duration: 2000
					});
				}
			},
			Tomine(val){
				console.log(val,'8888');
				switch (val){
					case 1:
					uni.navigateTo({
						url:'/pages/index/list'
					})
					break;
					case 2:
					uni.navigateTo({
						url:'/pages/mine/Smartservices'
					})
					break;
					case 3:
					uni.navigateTo({
						url:'/pages/mine/MyOrders'
					})
					break;
					default:
					console.log('哈哈哈');
				}
				
			},
			outLogin() {
				uni.redirectTo({
					url:'/pages/index/login'
				})
			},
	    }
	}
</script>

<style lang="scss" scoped>
	.iconfont{
		margin: auto;
	}
	.mine-content{
		background-color: #e7e7e7;height: 100vh;overflow: scroll;
		.main{
			
		.mine-top{
			padding:90rpx 40rpx;background-color: #61d455;display: flex;
			 border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;
			 margin: 20rpx;margin-bottom: 0px;
			 image{
				 border-radius: 50%;height: 130rpx;width: 130rpx;border: 2rpx solid #fff;
			 }
			 .top-content{
				 color: #fff;
				 margin: auto;
				 .top-text{
					 font-size: 40rpx;
					 margin-bottom: 20rpx;
				 }
			 }
		}
		.mine-center{
			padding: 40rpx; background-color: #fff; display: flex; justify-content: space-between;
			 border-bottom-right-radius: 20rpx; border-bottom-left-radius: 20rpx;margin: 20rpx;margin-top: 0px;
			 .center-item{
				 display: flex; flex-direction: column; align-items: center; justify-content: center;
				 text{
					 margin-top: 20rpx;
				 }
				 view{
					  border-radius: 50%; 
					 width: 80rpx; height: 80rpx; display: flex;
					  justify-content: center; align-items: center;
					  .iconfont{
						  font-size: 50rpx; color: #fff;
					  }
				 }
			 }
		}
		.bottom-content{
			background-color: #fff;margin-top: 20rpx;
			.bottom-item{
				display: flex; justify-content: space-between; 
				width: 100%;padding: 30rpx 50rpx; box-sizing: border-box;
				border-bottom: 1rpx solid #dcdcdc;
				view{
					.iconfont{
						font-size: 30rpx; color: #aaaaaa;margin-right: 15rpx;
					}
				}
			}
		}
		}
	}
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.navbar{
	position: fixed;bottom: 0%;background-color: #fff;width: 100%;padding: 15rpx 0;border-top: 1rpx solid #cecece;
	}

</style>
